<template>
    <van-grid :border="false" :column-num="2" ref="waterfallTarget">
        <van-grid-item v-for="item in goodsData">
            <router-link :to="{ name: 'goods', query: { id: item.id } }">
                <div>
                    <div class="pic_box">
                        <van-image :src="item.s_goods_photos[0].path" fit="cover" />
                    </div>
                    <div class="goods_title">
                        {{ item.name }}
                    </div>
                    <p class="price_box">
                        <span class="price_icon">￥</span>
                        <span class="price">{{ item.sale_price || item.price }}</span>
                        <span v-show="item.sale_price" class="price_info">折后价</span>
                    </p>
                </div>
            </router-link>
        </van-grid-item>
    </van-grid>
</template>

<script setup>
import { ref, defineProps, defineEmits, onUpdated, nextTick } from 'vue';
import { throttle } from '@/utils';
let waterfallTarget = ref(null);
let shopTarget = ref(null);
let images = ref([]);
const emits = defineEmits(['go']);
defineProps({
    goodsData: Array,
});

// onUpdated(()=>{
//     setTimeout(()=>{
//         nextTick(()=>{
//             let a=waterfallTarget.value.style.height.slice(0,-2);
//             shopTarget.value.style.height=Number(a)+100+'px'
//         })
//     },1000)
// })

document.addEventListener(
    'scroll',
    throttle(function () {
        const { scrollHeight, scrollTop, clientHeight } = document.documentElement;
        if (scrollHeight - scrollTop - 2 <= clientHeight) {
            emits('go'); //将事件go派发至父组件中更新
        }
    }, 500)
);
</script>

<style lang="scss" scoped>
@import '../../../style/base.scss';
.pic_box {
    width: 45vw;
    height: 45vw;
    overflow: hidden;
}
.goods_title {
    margin-top: 0.1rem;
    font-size: 0.14rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.price_box {
    width: 100%;
    .price_icon {
        font-size: 0.14rem;
        color: #ff4142;
    }
    .price {
        font-size: 0.2rem;
        color: #ff4142;
    }
    .price_info {
        margin-left: 0.12rem;
        font-size: 0.12rem;
        color: #bcbcbc;
    }
}
</style>
